import {IconPlusCircle} from '@arco-design/web-react/icon';
import sty from '@/style.module/editor/components/Thumbnail.module.scss';
import ScrollArea from 'react-scrollbar';

import type {RootState} from '@/store';
import {_addPage} from '@/store/pageSlice';
import type {IPageState} from '@/store/pageSlice';
import {useSelector, useDispatch} from 'react-redux';

export default function Thumbnail() {
    const dispatch = useDispatch();
    const pageStore = useSelector<RootState, IPageState>((state) => state.page);

    const addPage = () => {
        dispatch(_addPage());
    };

    return (
        <div className={sty.container}>
            <header className={sty.header} onClick={addPage}>
                <span className={sty.icon}>
                    <IconPlusCircle />
                </span>
                <span>添加幻灯片</span>
            </header>
            <ScrollArea
                horizontal={false}
                vertical={true}
                className={sty.content}
            >
                <div>
                    {pageStore.list.map((_: any, index: number) => (
                        <span>{index}</span>
                    ))}
                </div>
            </ScrollArea>
        </div>
    );
}
